<template>
    <f7-page infinite :infinite-distance="10" :infinite-preloader="showPreloader" @infinite="loadMore">
      <f7-navbar :back-link="$t('common.back')" :title="$t('events.title')" sliding>
      </f7-navbar>

      <f7-list media-list>
      <f7-list-item
         v-for="(item, index) in events"
        swipeout
        @swipeout:deleted="onDeleted(item.id)"
        :title="$store.state.devices.list[$store.state.devices.index[item.deviceId]].name"
        :after="dateFormat(item.time)"
        :subtitle="$t('events.'+$store.state.status[item.type]) +' '+ (item.geoName||'')"
        :text="item.address"
      >
        <span slot="media" class="statusColor" :style="{background:item.read?'#9e9e9e':'#f44336'}"></span>
        <f7-swipeout-actions right>
          <f7-swipeout-button color="orange" @click="readEvent(item.id)">{{$t("events.process")}}</f7-swipeout-button>
          <f7-swipeout-button delete overswipe confirm-text="你确认要删除此事件?">{{$t("common.delete")}}</f7-swipeout-button>
        </f7-swipeout-actions>
      </f7-list-item>

    </f7-list>

    </f7-page>
  </template>
  <script>
  import util from '../utils/util';
  import { getEvents,readEvent,deleteEvent } from '@/api/api';
    export default {

    		data() {
    				return {
    					events:[],
              allowInfinite:true,
              showPreloader:true,
              page:1,
              total:0,
              pageSize:10
    				}
    			},
    			methods:{
    				init(page){
              var params = {page:page,pageSize:this.pageSize}
    					getEvents(params).then(data => {
    						this.events = this.events.concat(data.events);
    					});
    				},
            readEvent(id){
              readEvent(id).then(data => {
    					});
            },
            onDeleted(id){
              deleteEvent(id).then(data => {
    					});
            },
            dateFormat(t){
                return util.dateFormat(t,'MM-DD HH:mm:ss');
            },
            loadMore(){
              const _this = this;
              if(!_this.allowInfinite) return;
              _this.allowInfinite = false;

              _this.showPreloader = false;
              setTimeout(function(){
                if(_this.events.length == _this.total){
                  _this.showPreloader = false;
                }
                _this.page++;
                _this.init(_this.page);
                _this.allowInfinite = true;
              },500);

            }
    			},
    			 mounted() {
              //console.log(222);
              this.init(this.page);

    			 }
    	}
  </script>
<style type="text/css" scoped>
  .statusColor{
    width: 15px;
    height: 15px;
    margin: 24px auto;
    padding: 0px;
    border-radius: 50%;
  }
</style>
